

<template>
    <!-- project页面下的依托单位分布图表 -->
    <div class="p-chart-ytdwfb0"></div>
</template>

<script>
import service from '@/service/projects';
export default {
    data(){
        return{
            // 陕西师范大学缺了2013年的数据 
            chart:null,
            chartData:{},
            college_name:[],
            date:[]
        }
    },
    mounted(){
        this.chart = echarts.init(document.querySelector('.p-chart-ytdwfb0'));
        this.chart.showLoading({
            text:'正在加载数据...'
        });
        this.initData();
    },
    methods:{
        initData(){
            service.getDatas({
                columns: ["college_name", "count:id"],
                group: ["college_name"],
                order: [["count:id", 1]],
                pageSize: 10,
            }, '1061')
            .then((res) => {
                let schoolnameArr = [];
                res.data.forEach((item) => {
                    schoolnameArr.push(item.college_name);
                });
                this.loadData(schoolnameArr);
            });
        },
        loadData(schoolnameArr) {
            service.getDatas({
                college_name: schoolnameArr,
                columns: ["college_name", "approval_year", "count:id"],
                group: ["college_name", "approval_year"],
                order: [
                    ["approval_year", 1],
                    ["count:id", 1],
                ],
                pageSize: 0,
            }, '1061')
            .then((res) => {
                for(let item of res.data){
                    this.college_name.push(item.college_name);
                    this.date.push(item.approval_year);
                    if(this.chartData[item.college_name]){
                        this.chartData[item.college_name].push(item._count_id);
                    }else{
                        this.chartData[item.college_name] = [item._count_id];

                    }
                }
                this.college_name = Array.from(new Set(this.college_name));
                this.date = Array.from(new Set(this.date)).reverse();
                this.initChart();
            });
        },
        initChart(){
            let that = this;
            //项目依托单位分布图表构建
            const colorList = ['#9E87FF', '#73DDFF', '#fe9a8b', '#F56948', 'pink'];
            var base = +new Date(2000, 9, 3);
            var oneDay = 24 * 3600 * 1000;
            var date = this.date;
            let option = {
                backgroundColor: '#fff',
                legend: {
                    x: 'center',
                    y: 'top',
                    show: true,
                    top: '0%',
                    right: '5%',
                    itemWidth: 10,
                    itemGap: 5,
                    bottom:0,
                    type: 'scroll',
                    width:'80%',
                    textStyle: {
                        color: '#556677',
                    },
                    selected: (function(){
                        let obj = {};
                        for(let i=that.college_name.length/2;i<that.college_name.length;i++){
                            obj[that.college_name[i]] = false;
                        }
                        return obj;
                    })(),
                    data: this.college_name,
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        label: {
                            show: true,
                            backgroundColor: '#fff',
                            color: '#556677',
                            borderColor: 'rgba(0,0,0,0)',
                            shadowColor: 'rgba(0,0,0,0)',
                            shadowOffsetY: 0,
                        },
                        lineStyle: {
                            width: 0,
                        },
                    },
                    backgroundColor: '#fff',
                    textStyle: {
                        color: '#5c6c7c',
                        align:'left',
                    },
                    padding: [10, 10],
                    extraCssText: 'box-shadow: 1px 0 2px 0 rgba(163,163,163,0.5)',
                },
                grid: {
                    top: '20%',
                    left:'5%',
                    right:'5%',
                    bottom:'20%',
                },
                dataZoom: [
                    {
                        type: 'inside',
                        start: 0,
                        end: 80,
                        zoomLock: true,
                    },
                    {
                        start: 0,
                        end: 80,
                        height:25,
                        bottom:0,
                        backgroundColor:"#fff",
                        width:'85%',
                    },
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: date,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8',
                            },
                        },
                        axisTick: {
                            show: true,
                        },
                        axisLabel: {
                            // interval: 0,
                            textStyle: {
                                color: '#556677',
                            },
                            // 默认x轴字体大小
                            fontSize: 12,
                            // margin:文字到x轴的距离
                            margin: 15,
                        },
                        axisPointer: {
                            label: {
                                // padding: [11, 5, 7],
                                padding: [0, 0, 10, 0],
                                margin: 15,
                                // 移入时的字体大小
                                fontSize: 12,
                                backgroundColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: '#fff', // 0% 处的颜色
                                        },
                                        {
                                            // offset: 0.9,
                                            offset: 0.86,
                                            color: '#fff', // 0% 处的颜色
                                        },
                                        {
                                            offset: 0.86,
                                            color: '#33c0cd', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#33c0cd', // 100% 处的颜色
                                        },
                                    ],
                                    global: false, // 缺省为 false
                                },
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            },
                        },
                        boundaryGap: false,
                    },
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '百分比（%）',
                        nameTextStyle:{
                            color:'#4eadca',
                            fontWeight:1000,
                        },
                        axisTick: {
                            show: false,
                        },
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#DCE2E8',
                            },
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#556677',
                            },
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dashed',
                            },
                        },
                    },
                ],
                series: [],
            };
            let index = 0;
            for(let college in this.chartData){
                option.series.push({
                    name: college,
                    type: 'line',
                    data: this.chartData[college].reverse(),
                    symbolSize: 1,
                    symbol: 'circle',
                    smooth: true,
                    yAxisIndex: 0,
                    showSymbol: false,
                    emphasis: {
                        focus: 'series',
                    },
                    lineStyle: {
                        width: 2,
                        shadowColor: 'rgba(158,135,255, 0.3)',
                        shadowBlur: 5,
                        shadowOffsetY: 10,
                    },
                    itemStyle: {
                        normal: {
                            color: colorList[index%5],
                            borderColor: colorList[index%5],
                        },
                    },
                    markPoint: {
                        symbol: 'pin', //标记(气泡)的图形
                        symbolSize: 50, //标记(气泡)的大小
                        itemStyle: {
                            // color: '#4587E7', //图形的颜色。
                            borderColor: '#000', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
                            borderWidth: 0, //描边线宽。为 0 时无描边。
                            borderType: 'solid', //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。
                        },
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' },
                        ],
                    },
                    markLine: {
                        data: [{ type: 'average', name: '平均值' }],
                    },
                });
                index++;
            }
            this.chart.setOption(option);
            this.chart.hideLoading();
            window.addEventListener("resize",()=>{
                this.chart.resize();
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.p-chart-ytdwfb0{
    padding: 50px 100px;
    width: 85vw;
    height: 550px;
} 
@media (max-width:1060px) {
.p-chart-ytdwfb0{
    width: 100vw;
    padding: 35px 30px;
    height: 400px;
} 
}
 
</style>